<template>
  <div>
    <div style="height:40px;padding:5px">
      <el-input placeholder="请输入搜索内容" v-model="keyword" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="listUser"></el-button>
      </el-input>
    </div>
    <div>
      <hr style="border:1 dashed " width="100%" color="#DCDFE6" size="1" />
    </div>
    <div>
      <ag-grid-vue
        ref="grid"
        :columnDefs="columnDefs"
        :rowData="rowData"
        style="height: 500px"
        :gridOptions="gridOpt"
        :pagination="false"
        :getRowNodeId="function(params){return params.AutoId}"
        :row-selection="multiplestr"
        class="ag-theme-material"
        @grid-ready="onGridReady"
        @firstDataRendered="setDefaultSelection"
      ></ag-grid-vue>
    </div>
    <div>
      <hr style="border:1 dashed " width="100%" color="#DCDFE6" size="1" />
    </div>
    <div>
      <el-button-group>
        <el-button size="mini" type="primary" @click="onConfirm">确认</el-button>
        <el-button size="mini" @click="onIgnore">取消</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue'
import { searchUser } from '@/api/user.js'

export default {
  components: {
    AgGridVue
  },
  data() {
    return {
      columnDefs: [
        { headerName: '', field: 'chk', width: 50, checkboxSelection: true },
        { headerName: '编码', field: 'Code', sortable: true, filter: true },
        { headerName: '姓名', field: 'Name', sortable: true, filter: true }
      ],
      rowData: [],
      gridApi: null,
      columnApi: null,
      keyword: '',
      multiplestr: '',
      gridOpt: null
    }
  },
  props: ['multiple', 'autoset', 'init'],
  methods: {
    onGridReady(params) {
      this.gridApi = params.api
      this.columnApi = params.columnApi
    },
    setDefaultSelection() {
      if (this.init && this.init.length > 0) {
        for (let idx in this.init) {
          this.gridApi.forEachNode(node => {
            if (node.data.AutoId === this.init[idx]) {
              node.setSelected(true)
            }
          })
        }
      }
    },

    listUser() {
      searchUser(this.keyword)
        .then(response => {
          this.rowData = response.Data
          this.gridApi.sizeColumnsToFit()
        })
        .catch(error => {
          console.log(error)
          this.rowData = []
        })
    },
    onConfirm() {
      const selectedNodes = this.gridApi.getSelectedNodes()
      const selectedData = selectedNodes.map(node => node.data)
      if (selectedData.length === 0) {
        this.$message('请先选中行')
        return
      }
      this.gridApi.deselectAll()
      this.$emit('confirm', selectedData)
    },
    onIgnore() {
      this.gridApi.deselectAll()
      this.$emit('ignore')
    }
  },
  mounted() {
    if (this.autoset) {
      this.listUser()
    }
  },
  beforeMount() {
    this.gridOpt = {}
    if (this.multiple) {
      this.multiplestr = 'multiple'
    } else {
      this.multiplestr = 'single'
    }
  }
}
</script>

<style lang="scss">
@import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-material.css";
</style>

